<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <my-breadcrumb>粉丝管理</my-breadcrumb>
      </div>
      <!-- 下方的主体部分 v-model="activeName" 配合data中的activeName 以及name="list"
      这个属性,可以实现点击导航栏切换内容 tabs 是标签栏的主体 el-tab-pane 是它内部的填充 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="列表" name="list" >
          <el-row class="fans_list">
            <!--fan.id.toString() - 因为id是一个大数，它其实是一个对象，不能直接作为key  -->
            <el-col :span="3" v-for="fan in fans" :key="fan.id.toString()" class="fans_item">
              <div>
                <el-avatar :size="80"
                :src="fan.photo"></el-avatar>
                <p>{{fan.name}}</p>
                <el-button type="primary" plain size="small">+关注</el-button>
              </div>
            </el-col>
          </el-row>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="hPageChange"
            :page-size="21"
            :total="total_count">
          </el-pagination>
        </el-tab-pane>
        <!-- el-tab-pane 这个标签的内容是啥 -->
        <el-tab-pane label="画像" name="echart">
          画像的内容
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'fans',
  data () {
    return {
      total_count: 0, // 总数量
      fans: [], // 粉丝列表
      page: 1, // 页码数
      activeName: 'list'// 表示默认选中的选项
    }
  },
  created () {
    this.loadFans()
  },
  methods: {
    async loadFans () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/followers',
          params: {
            page: this.page,
            per_page: 21
          }
        })
        // console.log(res)
        this.fans = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    // 点击切换图片,如果切换到画图界面,则发送请求,开始画图
    handleClick () {
      if (this.activeName === 'echart') {
        this.draw()
      }
    },
    // 引入图画插件的三部曲,这里只是把这个步骤搬到函数调用中来而已
    async draw () {
      // 图片的实例化容器
      const myChart = echarts.init(document.getElementById('main'))
      // 获取后端数据
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/statistics/followers'
      })
      // console.log(res)
      const { xData, yData } = this.buildData(res.data.data.age)
      // 配置数据
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar', // line
          data: yData
        }]
      }
      // 把数据呈现到图片中,就和引入页面的三部曲一样
      myChart.setOption(option)
    },
    // 加工数据
    buildData (obj) {
      const xData = Object.keys(obj)
        .map(item => item.replace('le', '小于').replace('gt', '大于'))

      // Object.values(对象)： 把这个对象的属性值收集到一个数组中
      const yData = Object.values(obj)
      return { xData, yData }
    },
    // 点击切换封面
    hPageChange (curPage) {
      this.page = curPage
      this.loadFans()
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
